<div class="layuimini-main">
    <div class="layui-form layuimini-form">
        <blockquote class="layui-elem-quote layui-text">
            在这里选择你的班级（需要辅导员提前设置好班级名称，不选择班级则分配至默认班级）
        </blockquote>
        <div class="layui-form-item">
            <label class="layui-form-label">学号</label>
            <div class="layui-input-block">
                <input type="text" name="role" autocomplete="off" class="layui-input" value="学号" id="userName-input-text">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="role" autocomplete="off" class="layui-input" value="姓名" id="fullName-input-text">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
                <input type="text" name="role" autocomplete="off" class="layui-input" value="角色" id="role-input-text">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学院</label>
            <div class="layui-input-block">
                <select name="college" lay-verify="required" lay-reqtext="请确保所有的必须项都填写完整！"  id="college-select" lay-filter="college-select">
                    <option value="">请选择一个学院</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">专业</label>
            <div class="layui-input-block">
                <select name="major" lay-verify="required" lay-reqtext="请确保所有的必须项都填写完整！"   id="major-select" lay-filter="major-select">
                    <option value="">需要先选择学院</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年级</label>
            <div class="layui-input-block">
                <select name="grade" lay-verify="required" lay-reqtext="请确保所有的必须项都填写完整！"  id="grade-select" lay-filter="grade-select">
                    <option value="">需要先选择专业</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">班级</label>
            <div class="layui-input-block">
                <select name="class" lay-verify="" id="class-select" lay-filter="class-select">
                    <option value="">需要先选择年级</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"> </label>
            <div class="layui-input-inline" style="width: unset">
                <input name="isAccept" type="checkbox" lay-verify="accept-xy" id="accept-xy" lay-filter="accept-xy" lay-skin="primary" title="我已阅读并同意">
                <div style="position: relative;top: 5px;display: inline"><p style="display: inline;color: deepskyblue" id="xy-btn">用户协议</p></div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="save">立即修改</button>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'layedit', 'laydate','miniPage','element'], function() {
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate,
            miniPage = layui.miniPage;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        //学生信息初始化
        //不允许修改部分内容
        jq1111('#role-input-text').attr("disabled","disabled");
        jq1111('#userName-input-text').attr("disabled","disabled");
        jq1111('#fullName-input-text').attr("disabled","disabled");

        //定义变量
        var userId=localStorage.getItem('selectedUserId');
        var userData;
        //获取学生信息
        jq1111.ajax({
            type: "GET",
            async:false,
            crossDomain:true,
            url: BasePath+"api/Account/",
            contentType: "application/json",
            xhrFields: {
                withCredentials: true
            },
            success:function (message) {
                console.log(message);
                userData=message.data;
                layer.msg(message.msg, function () {
                });
            },
            error:function (message) {
                console.log(message.responseJSON);
                layer.msg('失败:'+message.responseJSON.msg);
            },
        });
        //给表单赋值
        //学号 姓名 角色 赋初值
        jq1111('#userName-input-text').val(userData.userName);
        jq1111('#fullName-input-text').val(userData.fullName);
        jq1111('#role-input-text').val(function (){
            var result="";
            var roles= userData.roles;
            roles.forEach(function (role) {
                result+=role;
                result+=" ";
            })
            return result;
        });

        //获取学院
        jq1111.ajax({
            type: "GET",
            async:false,
            crossDomain:true,
            url: BasePath+"api/School/Colleges",
            contentType: "application/json",
            dataType:"json",
            xhrFields: {
                withCredentials: true
            },
            success:function (message) {
                var colleges=message.data;
                console.log(message);
                colleges.forEach(function (college) {
                    console.log(college)
                    jq1111("#college-select").append('' +
                        '<option value="' +
                        college.id +
                        '">' +
                        college.name +
                        '</option>' +
                        '')
                })
                //再次初始化form
                form.render();
            },
            error:function (message) {
                console.log(message.responseJSON);
                layer.msg('失败:'+message.responseJSON.message);
            },
        });
        console.log('userdata',userData)
        form.render();
        //获取年级
        jq1111.ajax({
            type: "GET",
            async:false,
            crossDomain:true,
            url: BasePath+"api/School/Grades",
            contentType: "application/json",
            dataType:"json",
            xhrFields: {
                withCredentials: true
            },
            success:function (message) {
                console.log(message)
                var grades=message.data;
                grades.forEach(function (grade) {
                    jq1111("#grade-select").append('' +
                        '<option value="' +
                        grade.id +
                        '">' +
                        grade.display +
                        '</option>' +
                        '')
                })
                //再次初始化form
                form.render();
            },
            error:function (message) {
                console.log(message.responseJSON);
                layer.msg('失败:'+message.responseJSON.message);
            },
        });


        if(userData.college!=null){

            //获取班级
            jq1111.ajax({
                type: "GET",
                async:false,
                crossDomain:true,
                url: BasePath+'api/School/Classes?majorId='+jq1111('#major-select').val()+'&gradeId='+jq1111('#grade-select').val(),
                contentType: "application/json",
                dataType:"json",
                xhrFields: {
                    withCredentials: true
                },
                success:function (message) {
                    var classes=message.data;
                    classes.forEach(function (classt) {
                        jq1111("#class-select").append('' +
                            '<option value="' +
                            classt.id +
                            '">' +
                            classt.name +
                            '</option>' +
                            '')
                    });
                    //再次初始化form

                    form.render('select');
                },
                error:function (message) {
                    console.log(message.responseJSON);
                },
            });

            //获取专业
            jq1111.ajax({
                type: "GET",
                async:false,
                crossDomain:true,
                url: BasePath+"api/School/Majors?collegeId="+userData.major.id,
                contentType: "application/json",
                dataType:"json",
                xhrFields: {
                    withCredentials: true
                },
                success:function (message) {
                    var majors=message.data;
                    majors.forEach(function (major) {
                        jq1111("#major-select").append('' +
                            '<option value="' +
                            major.id +
                            '">' +
                            major.name +
                            '</option>' +
                            '')
                    });
                    //再次初始化form
                    jq1111("#major-select").val(userData.major.id);
                    form.render('select');
                },
                error:function (message) {
                    console.log(message.responseJSON);
                },
            });
            jq1111("#class-select").val(userData.class.id);
            jq1111("#grade-select").val(userData.grade.id);
            jq1111("#college-select").val(userData.college.id);
        }




        //监听学院的select事件来获取专业
        form.on('select(college-select)', function(data){
            console.log(data)
            if(data.value == ""){
                jq1111("#major-select").attr("disabled","disabled");
                jq1111("#class-select").attr("disabled","disabled");

                form.render('select');
            }else{
                jq1111("#major-select").removeAttr("disabled");
                //移除之前添加的专业
                var children=jq1111("#major-select").children();
                for (i=1;i<children.length;i++){
                    children.eq(i).remove();
                }
                //获取专业
                jq1111.ajax({
                    type: "GET",
                    async:false,
                    crossDomain:true,
                    url: BasePath+"api/School/Majors?collegeId="+data.value,
                    contentType: "application/json",
                    dataType:"json",
                    xhrFields: {
                        withCredentials: true
                    },
                    success:function (message) {
                        var majors=message.data;
                        majors.forEach(function (major) {
                            jq1111("#major-select").append('' +
                                '<option value="' +
                                major.id +
                                '">' +
                                major.name +
                                '</option>' +
                                '')
                        });
                        form.render('select');
                    },
                    error:function (message) {
                        console.log(message.responseJSON);
                    },
                });
                form.render('select');//select是固定写法 不是选择器
            }
        });

        //监听专业的select事件来设置年级
        form.on('select(major-select)', function(data){
            console.log(data)
            if(data.value == ""){
                jq1111('#grade-select').attr("disabled","disabled");
                form.render('select');
            }else{
                jq1111('#grade-select').removeAttr("disabled");
                form.render('select');
            }
        });

        //监听年级的select事件来设置班级
        var classes;
        form.on('select(grade-select)', function(data){
            console.log(data)
            if(data.value == ""){
                jq1111('#class-select').attr("disabled","disabled");
                form.render('select');
            }else{
                console.log(BasePath+'api/School/Classes?majorId='+jq1111('#major-select').val()+'&gradeId='+jq1111('#grade-select').val());
                jq1111('#class-select').removeAttr("disabled");
                //移除之前添加的班级
                var children=jq1111("#class-select").children();
                for (i=1;i<children.length;i++){
                    children.eq(i).remove();
                }
                console.log('gradeid',jq1111('#grade-select-search'))
                //获取班级
                jq1111.ajax({
                    type: "GET",
                    async:false,
                    crossDomain:true,
                    url: BasePath+'api/School/Classes?majorId='+jq1111('#major-select').val()+'&gradeId='+jq1111('#grade-select').val(),
                    contentType: "application/json",
                    dataType:"json",
                    xhrFields: {
                        withCredentials: true
                    },
                    success:function (message) {
                        classes=message.data;
                        classes.forEach(function (classt) {
                            jq1111("#class-select").append('' +
                                '<option value="' +
                                classt.id +
                                '">' +
                                classt.name +
                                '</option>' +
                                '')
                        });
                        //再次初始化form
                        form.render('select');
                    },
                    error:function (message) {
                        console.log(message.responseJSON);
                    },
                });
                form.render('select');//select是固定写法 不是选择器
            }

        });
        form.render('select');//select是固定写法 不是选择器


        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });


        //监听指定开关
        form.on('switch(switchTest)', function(data) {
            layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        });

        //监听提交
        form.on('submit(save)', function(data) {
            console.log(data,data.field.class)
            if(data.field.isAccept!=='on'){
                layer.msg('请先同意用户协议');
                return ;
            }
            if(data.field.class==""){
                jq1111('#class-select').val(classes[0].id);
            }
            jq1111.ajax({
                type: "POST",
                crossDomain:true,
                url: BasePath+"api/Account/UpdateStudentInfo",
                contentType: "application/json",
                dataType:"json",
                xhrFields: {
                    withCredentials: true
                },
                data:JSON.stringify(
                    {
                        "classId":jq1111('#class-select').val()
                    }
                ),
                success:function (message) {
                    console.log(message);
                    layer.msg(message.msg, function () {
                    });
                },
                error:function (message) {
                    console.log(message.responseJSON);
                    layer.msg('失败:'+message.responseJSON.msg);
                },
            });
            return false;
        });

        //用户协议点击事件
        jq1111('#xy-btn').click(function (){
            var content = miniPage.getHrefContent('page/xy.html');
            var openWH = miniPage.getOpenWidthHeight();

            var index = layer.open({
                title: '用户协议',
                type: 1,
                shade: 0.2,
                maxmin:true,
                shadeClose: true,
                area: [openWH[0] + 'px', openWH[1] + 'px'],
                offset: [openWH[2] + 'px', openWH[3] + 'px'],
                content: content,
            });
            $(window).on("resize", function () {
                layer.full(index);
            });
        });
    });
</script>